<div class="padding-bottom-45">
  <div class="modal-header">
    <div class="modal-title">{{ l('CreateNewRole') }}</div>
  </div>

  <form nz-form #validateForm="ngForm" (ngSubmit)="save()">
    <!-- 角色名称 -->
    <nz-form-item>
      <nz-form-control nzHasFeedback>
        <input
          nz-input
          name="name"
          #name="ngModel"
          [(ngModel)]="role.name"
          [placeholder]="l('Name')"
          required
        />
        <nz-form-explain *ngIf="name.control.dirty && name.control.errors">
          <ng-container *ngIf="name.control.hasError('required')">{{
            l('CanNotNull')
          }}</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- 角色展示名称 -->
    <nz-form-item>
      <nz-form-control nzHasFeedback>
        <input
          nz-input
          name="displayName"
          #displayName="ngModel"
          [(ngModel)]="role.displayName"
          [placeholder]="l('DisplayName')"
          required
        />
        <nz-form-explain
          *ngIf="displayName.control.dirty && displayName.control.errors"
        >
          <ng-container *ngIf="displayName.control.hasError('required')">{{
            l('CanNotNull')
          }}</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- 角色介绍 -->
    <nz-form-item>
      <nz-form-control>
        <input
          nz-input
          name="description"
          [(ngModel)]="role.description"
          [placeholder]="l('RoleDescription')"
        />
      </nz-form-control>
    </nz-form-item>

    <!-- 权限组 -->
    <nz-form-item>
      <nz-checkbox-group
        name="grantedPermissions"
        [(ngModel)]="permissionList"
        *ngIf="permissionList.length != 0"
      ></nz-checkbox-group>
    </nz-form-item>

    <!-- 功能按钮 -->
    <div class="modal-footer">
      <button nz-button type="button" [disabled]="saving" (click)="close()">
        {{ l('Cancel') }}
      </button>
      <button
        nz-button
        [nzType]="'primary'"
        type="submit"
        [disabled]="!validateForm.valid || saving"
      >
        {{ l('Save') }}
      </button>
    </div>
  </form>
</div>
